<template>
  <div class="content">
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item>
        <el-input v-model="form.name" size="mini" placeholder="请输入姓名/学号/工号/证件号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="form.name" placeholder="选择年级" size="mini">
          <el-option label="阳光中学" value="0"></el-option>
          <el-option label="太阳小学" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="form.name" placeholder="选择班级" size="mini">
          <el-option label="阳光中学" value="0"></el-option>
          <el-option label="太阳小学" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" size="mini" class="btn">查询</el-button>
      <el-button type="primary" size="mini" class="btn" style="margin-right: 40px">批量发卡</el-button>
      <el-button type="primary" size="mini" class="btn" style="margin-right: 40px">发临时卡</el-button>

    </el-form>

    <!-- <el-divider></el-divider> -->

    <template>
      <el-table
        :data="tableData"
        size="mini"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="用户ID"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>

        <el-table-column
          prop="name"
          label="学号">
        </el-table-column>

        <el-table-column
          prop="name"
          label="身份证号">
        </el-table-column>

        <el-table-column
          prop="name"
          label="性别">
        </el-table-column>

        <el-table-column
          prop="name"
          label="名族">
        </el-table-column>


        <el-table-column
          prop="name"
          label="年级">
        </el-table-column>

        <el-table-column
          prop="name"
          label="班级">
        </el-table-column>

        <el-table-column
          prop="name"
          label="入学时间">
        </el-table-column>

        <el-table-column
          prop="name"
          label="状态">
        </el-table-column>

        <el-table-column
          fixed="right"
          :label="$t('action.operation')"
          width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showEdit=true">发卡</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--新增编辑弹框-->
    <el-dialog title="批量发卡" :visible.sync="showEdit" width="40%" v-dialogDrag>
      <edit></edit>
    </el-dialog>
  </div>
</template>

<script>
    import edit from "@/components/SendCardManagement/edit";

    export default {
        name: "editCanteen",
        components: {
            edit
        },
        data() {
            return {
                showEdit: false,//显示编辑弹框
                form: {
                    name: '',
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        },
        mounted() {
            console.log(this.$t('action'))
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
        }
    }
</script>

<style scoped lang="scss">
  .table_btn{
    background: #eee;
    color: #7b9dda;
    border: none;
    outline: none;
    padding: 4px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
  }
  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }

  .btn {
    margin-top: 7px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
